import Api, { GET_SHOP_ORDER_GOODS_INFO, ADD_COMMENT } from '../../../utils/api.js';
import { ossupload } from '../../../utils/ossupload.js';
import { handPic, error } from '../../../utils/util.js';


// pages/mine/logistics/logistics.js
Page({
    /**页面的初始数据*/
    data: {

        comment: [],     // 评价内容
        imgs: [],        // 评价图片列表
        showimgs: [],

        scoreArray: ['all', 'all', 'all', 'all', 'all'],
        score: '',           // 商品评分

        wrapLeft: '',        // wrap距离左边的距离
        pageWidth: '',       // 页面宽度
        wrapWidth: '',       // wrap宽度
        startWidth: '',      // start宽度
    },

    /** 数据初始化 */
    onLoad: function (options) {
        let id = options.id,
            _this = this,
            key;
        //判断是否登录
        if (Api.checkLogin(function () {
            _this.onLoad(options);
        })) {
            key = Api.getKey();
            _this.setData({ key: key })
        }

        Api.fetch(GET_SHOP_ORDER_GOODS_INFO, { key: key, id: id }, resp => {
            resp.goods_img = handPic(resp.goods_img, 4);
            this.setData({
                info: resp
            })
        })
    },
    onReady: function () {
        this.getEleSize();
    },
    /** ================= 设置标签 =================*/
    setTag: function (e) {
        let { tags } = this.data;
        const { idx } = e.target.dataset;
        const state = tags[idx].state;

        state ? tags[idx].state = false : tags[idx].state = true
        this.setData({ tags: tags });
        this.filterTags(tags);
    },
    /** 筛选出选中的标签 */
    filterTags: function (tags) {
        let array = [];
        tags.map((item, idx) => {
            if (item.state) { array.push(tags[idx].id) }
        });
        this.setData({ activeTags: array });
    },

    /** ================= 设置标签 =================*/
    /** 获取评价内容*/
    getevalutauib: function (e) {
        this.setData({ comment: e.detail.value });
    },

    /** ================= 获取评分 =================*/
    /** 1  获取元素尺寸 */
    getEleSize: function () {
        const that = this;
        const query = wx.createSelectorQuery();
        wx.getSystemInfo({   // 页面尺寸
            success: function (res) {
                that.setData({ pageWidth: res.windowWidth });
            }
        });

        query.selectAll('.rate_wrap').boundingClientRect(function (rect) {// 容器尺寸
            that.setData({ wrapWidth: rect[0].width, wrapLeft: rect[0].left });
        }).exec();

        query.selectAll('.rate-icon').boundingClientRect(function (rect) { // 星星尺寸
            that.setData({ startWidth: rect[0].width });

        }).exec();

    },

    /** 2 Touch 事件*/
    TouchStart: function (e) {
        let clientX = e.touches[0].clientX;     //点击坐标
        this.calculate(clientX);
    },

    TouchMove: function (e) {
        let clientX = e.touches[0].clientX;     //点击坐标
        this.calculate(clientX);
    },

    /**  3 评分计算 */
    calculate: function (clientX) {
        let { pageWidth, wrapWidth, startWidth, wrapLeft } = this.data,
            start = wrapLeft, end = wrapLeft + wrapWidth,
            rate = ((clientX - wrapLeft) / (startWidth + 4)).toFixed(1);
        rate = rate > 5 ? Math.ceil(Math.min(5, rate)) : Math.ceil(Math.max(1, rate));

        this.getEvaluation(rate);
    },

    /**  4 处理评分 */
    getEvaluation: function (score) {
        let temp = ['all', 'all', 'all', 'all', 'all'];
        //  五个阶段每个阶段三个状态 2一半  0全部 all空白

        temp.map((v, k) => {
            if (score > k) {
                temp[k] = 0;
            }
        })

        this.setData({ scoreArray: temp, score: score })

    },
    /** ================= 获取评分 =================*/

    /** 提交*/
    submit: function () {


        let { comment, imgs, score, key, info } = this.data;

        if (!score) {
            error("请为商品打分");
            return;
        }
        if (!comment) {
            error("请输入您的评价");
            return;
        }

        if (imgs) {
            imgs = imgs.join(',');
        }

        Api.fetch(ADD_COMMENT, { key: key, score: score, comment: comment, imgs: imgs, id: info.id }, resp => {
            wx.redirectTo({
                url: '/pages/mine/order_list/order_list?type=4',
            })
        })
    },

    /** 页面跳转*/
    navigateTo: function () {
        wx.navigateTo({
            url: '',
        })
    },
    onShareAppMessage: function () {

    },

    upimg: function () {
        const that = this;
        const { imgs, showimgs } = this.data;
        
        ossupload(function (key) {
            let url = handPic(key, 4);
            imgs.push(key);
            showimgs.push(url);
            that.setData(
                {
                  imgs: imgs,
                  showimgs:showimgs
                }
            )
        });
    },
    /** 删除图片 */
    del_upimg: function (e) {
        let { idx } = e.target.dataset;
        let { imgs,showimgs} = this.data;
        const that = this;

        wx.showModal({
            content: '确认删除图片',
            success: function (res) {
                if (res.confirm) {
                    imgs.splice(idx, 1);
                    showimgs.splice(idx, 1);
                    that.setData({ 
                        imgs: imgs ,
                        showimgs: showimgs
                    });
                } else if (res.cancel) {

                }
            }
        });
    }
})